<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式管理</title>
    <style>
        /* div{
            color: blue;
        } */

        div{
            font-size: 35px;
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="app" style="background-color: red; margin: 20px;" class="d-flex container">后盾人</div>
    <script>
        // let app = document.getElementById('app');
        //直接设置元素类
        // app.className = 'hdcms';

        //通过特征的方式来更改
        // app.setAttribute('class','hdcm1s');

        //再元素原有的class上添加新的class
        // app.classList.add('hdcms');

        //使用classList也可以移除class列表中的部分class
        // app.classList.remove('hdcms');

        //使用toggle切换类,即类存在的时候删除，不存在的时候进行添加操作
        // app.addEventListener('click',function(){
        //     this.classList.toggle('hdcms');
        // });

        //使用contains检查class是否存在
        // console.log(app.classList.contains('container'));

        // console.log(app.classList.contains('hdmcs'));

        // console.log(app.classList);


        //设置行样式
        //使用style对象可以对样式属性单独设置，使用cssText可以批量设置行样式
        //样式属性设置
        //使用节点的style对象来设置样式
        //多个单词的的属性都使用驼峰进行命名

        // app.style.backgroundColor = 'red';
        // app.style.color = 'yellow';


        //批量设置行内样式
        //批量设置的时候不需要使用驼峰命名
        // app.style.cssText = `background-color:yellow;color:red;font-size:20px;`;

        //可以通过setAttribute改变style的特征来批量设置样式
        // app.setAttribute('style','background-color:red;color:yellow');

        //获取样式
        //下面通过style对象,window.getComputedStyle 对象获取样式的属性
        //下面进行说明
        //style

        //style  获取行内样式
        // let app = document.getElementById(`app`);
        // console.log(app.style.backgroundColor);
        // console.log(app.style.margin);
        // console.log(app.style.marginTop);
        // console.log(app.style.color);//外面的获取不到


        //getComputedStyle
        //使用window.getComputedStyle可以获取所有应用再元素上的样式属性

        //函数的第一个参数为元素
        //第二个参数为伪类
        //这是计算后的样式属性,所以取得的单位和定义的时候可能有所不同

        let app = document.getElementById('app');
        let fontSize =window.getComputedStyle(app).fontSize;
        console.log(fontSize.slice(0,-2));
        console.log(parseInt(fontSize));




    </script>
</body>
</html>